<template>
  <el-form :model="formData" inline ref="formData" label-position="top" class="row-form" v-if="formData">
    <el-card class="box-card">
      <div class="card-view">
        <div class="card-title">企业信息</div>

        <el-form-item label="企业名称" prop="name" class="form-item-css">
          {{formData.name}}
        </el-form-item>

        <el-form-item label="统一社会信用代码" prop="creditCode" class="form-item-css">
          {{formData.creditCode}}
        </el-form-item>

        <el-form-item label="法定代表人姓名" prop="legalPerson" class="form-item-css">
          {{formData.legalPerson}}
        </el-form-item>

        <el-form-item label="营业期限" prop="operatingPeriod" class="form-item-css">
          {{formData.operatingPeriod}}
        </el-form-item>

        <el-form-item label="经营地址" prop="address" class="form-item-css">
          {{formData.address}}
        </el-form-item>

        <el-form-item prop="operatingPeriod" class="form-item-css"/>

        <el-form-item label="营业执照" prop="licenseImage" class="form-item-css">
          <div class="image-view" v-if="formData.licenseImage">
            <el-image :src="formData.licenseImage" fit="cover" :preview-src-list="[formData.licenseImage]" style="width: 100%; height: 100%"></el-image>
          </div>
        </el-form-item>

      </div>
    </el-card>

    <el-card class="box-card">
      <div class="card-view">
        <div class="card-title">法人信息</div>

        <el-form-item label="姓名" prop="legalPerson" class="form-item-css">
          {{formData.legalPerson}}
        </el-form-item>

        <el-form-item label="性别" prop="legalPersonSex" class="form-item-css">
          {{formData.legalPersonSex}}
        </el-form-item>

        <el-form-item label="出生日期" prop="legalPersonBirth" class="form-item-css">
          {{formData.legalPersonBirth}}
        </el-form-item>

        <el-form-item label="住址" prop="legalPersonAddress" class="form-item-css">
          {{formData.legalPersonAddress}}
        </el-form-item>

        <el-form-item prop="operatingPeriod" class="form-item-css"/>
        <el-form-item prop="operatingPeriod" class="form-item-css"/>

        <el-form-item label="身份证人像面" prop="idCardJustImg" class="form-item-css">
          <div class="image-view" v-if="formData.idCardJustImg">
            <el-image :src="formData.idCardJustImg" fit="cover" :preview-src-list="[formData.idCardJustImg]" style="width: 100%; height: 100%"></el-image>
          </div>
        </el-form-item>

        <el-form-item label="身份证国徽面" prop="idCardBackImg" class="form-item-css">
          <div class="image-view" v-if="formData.idCardBackImg">
            <el-image :src="formData.idCardBackImg" fit="cover" :preview-src-list="[formData.idCardBackImg]" style="width: 100%; height: 100%"></el-image>
          </div>
        </el-form-item>
      </div>
    </el-card>

    <el-card class="box-card">
      <div class="card-view">
        <div class="card-title">申请人信息</div>

        <el-form-item label="姓名" prop="extraName" class="form-item-css">
          {{formData.extraName}}
        </el-form-item>

        <el-form-item label="性别" prop="extraSex" class="form-item-css">
          {{formData.extraSex}}
        </el-form-item>

        <el-form-item label="出生日期" prop="extraBirth" class="form-item-css">
          {{formData.extraBirth}}
        </el-form-item>

        <el-form-item label="住址" prop="extraAddress" class="form-item-css">
          {{formData.extraAddress}}
        </el-form-item>

        <el-form-item label="联系方式" prop="contactsPhone" class="form-item-css">
          {{formData.contactsPhone}}
        </el-form-item>


        <el-form-item prop="operatingPeriod" class="form-item-css"/>

        <el-form-item label="身份证人像面" prop="idCardExtraJustImg" class="form-item-css">
          <div class="image-view" v-if="formData.idCardExtraJustImg">
            <el-image :src="formData.idCardExtraJustImg" fit="cover" :preview-src-list="[formData.idCardExtraJustImg]" style="width: 100%; height: 100%"></el-image>
          </div>
        </el-form-item>

        <el-form-item label="身份证国徽面" prop="idCardExtraBackImg" class="form-item-css">
          <div class="image-view" v-if="formData.idCardExtraBackImg">
            <el-image :src="formData.idCardExtraBackImg"  :preview-src-list="[formData.idCardExtraBackImg]" fit="cover" style="width: 100%; height: 100%"></el-image>
          </div>
        </el-form-item>
      </div>
    </el-card>

    <div class="row-div" style="margin: 30px 0" v-if="formData">
      <el-button style="width: 300px" @click="$router.push('/enterpriseManage/enterpriseAudit')">
        {{formData.checkState == 0 ? '取 消' : '返 回'}}
      </el-button>
      <el-button type="warning" style="width: 300px" @click="onSubmit(2)" v-if="formData.checkState == 0">驳 回</el-button>
      <el-button type="primary" style="width: 300px" @click="onSubmit(1)" v-if="formData.checkState == 0">通 过</el-button>
    </div>
  </el-form>
</template>

<script>
  export default {
    name: 'enterpriseAuditDetail',
    data () {
      return {
        detailId: null,
        formData: null,
        status: 0
      }
    },
    async beforeMount() {
      this.status = this.$route.query.status || 0
      if (this.$route.query.detailId) {
        this.detailId = this.$route.query.detailId || null
        this.getDetailRequest()
      }
    },
    methods: {
      onSubmit (type) {
        if (type == 1) {
          this.$confirm('此操作将无法修改, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => this.enterpriseCertification(1))
        } else if(type == 2) {
          this.$prompt('请输入拒绝理由', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
          }).then(async ({ value }) => {
            if (!value) return this.$message.warning('请输入拒绝理由')
            this.enterpriseCertification(2, value)
          })
        }
      },
      async enterpriseCertification (event, value = "") {
        const url = this.status == 1 ? '/enterprise/update' : '/wx/enterpriseCertification/check'
        const entity = this.status == 1 ? {checkReason: value, checkStatus: event, id: this.detailId} : {reject: value, checkState: event, id: this.detailId}
        await this.$ajax.post(url, entity)
        this.$message.success('操作成功')
        await this.getDetailRequest()
        this.$router.go(-1)
      },
      async getDetailRequest () {
        const url = this.status ? '/enterprise/backstage/info' : '/wx/enterpriseCertification/info'
        const res = await this.$ajax.get(`${url}?id=${this.detailId}`)
        this.status == 1 ? res.data.checkState = res.data.checkStatus : null
        this.formData = res.data
      },
    }
  }
</script>

<style scoped lang="scss">
  .box-card + .box-card {
    margin-top: 20px;
  }

  .image-list {
    width: 148px;
    height: 148px;
    position: relative;
    margin-right: 10px;
    border: 1px dashed #c0ccda;
    border-radius: 6px;
    &:hover > .image-hover {
      display: flex;
      z-index: 1;
    }
    .image-item, .image-hover {
      width: 100%;
      height: 100%;
      border-radius: 6px;
    }
    .image-hover {
      position: absolute;
      top: 0;
      left: 0;
      display: none;
      background: rgba(0, 0, 0, 0.5);
      color: white;
      font-size: 20px;
    }
  }

  .card-view {
    width: 100%;
    .card-title {
      width: 200px;
      font-weight: bold;
      font-size: 18px;
      padding-bottom: 10px;
      margin-bottom: 20px;
      position: relative;
      &:before {
        content: "";
        width: 200px;
        height: 1px;
        background: #000000;
        position: absolute;
        bottom: 0;
        left: 0;
      }
    }

    .form-item-css {
      width: calc(100% / 3 - 10px);
      position: relative;
      .delete-but {
        position: absolute;
        color: red;
        z-index: 2;
        right: 0;
        top: -40px;
      }
    }
  }

  .image-view {
    width: 100%;
    height: 178px;
    position: relative;
    .el-icon-circle-close {
      font-size: 30px;
      color: red;
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 100;
    }
    .el-icon-circle-close:hover {
      cursor: pointer;
    }
  }
</style>
